﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "添加班组";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加班组</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" media="all">
    <style>
        body {
            background-color: #f5f7fa;
            font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
            margin: 0;
            padding: 20px 0;
        }
        .form-container {
            max-width: 800px;
            margin: 0 auto;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }
        .form-header {
            background: #5a67d8;
            color: white;
            padding: 25px 40px;
            text-align: center;
        }
        .form-title {
            font-size: 20px;
            font-weight: 500;
            margin: 0;
        }
        .form-body {
            padding: 40px;
        }
        .layui-form-item {
            margin-bottom: 28px;
        }
        .layui-form-label {
            width: 120px;
            padding: 0;
            color: #2d3748;
            font-weight: 500;
            background: none;
            border: none;
            text-align: right;
            line-height: 44px;
            float: left;
        }
        .layui-input-block {
            margin-left: 140px;
        }
        .layui-input, .layui-select, .layui-textarea {
            height: 44px;
            line-height: 44px;
            padding: 0 15px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.2s ease;
            background: #fff;
        }
        .layui-input:focus, .layui-select:focus, .layui-textarea:focus {
            border-color: #5a67d8;
            box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1);
            outline: none;
        }
        .layui-textarea {
            height: auto;
            line-height: 1.5;
            padding: 12px 15px;
            min-height: 80px;
            resize: vertical;
        }
        .auto-generate-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .auto-generate-wrapper .layui-input {
            flex: 1;
        }
        .switch-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            background: #f7fafc;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 12px;
            color: #4a5568;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .switch-btn:hover {
            background: #edf2f7;
            border-color: #cbd5e0;
        }
        .required-mark {
            color: #e53e3e;
            margin-right: 4px;
        }
        .form-actions {
            padding: 30px 40px;
            background: #f7fafc;
            text-align: center;
            border-top: 1px solid #e2e8f0;
        }
        .layui-btn {
            height: 44px;
            line-height: 44px;
            padding: 0 32px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .btn-primary {
            background: #5a67d8;
            color: white;
            margin-right: 12px;
        }
        .btn-primary:hover {
            background: #4c51bf;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(90, 103, 216, 0.3);
        }
        .btn-default {
            background: #fff;
            color: #4a5568;
            border: 1px solid #e2e8f0;
        }
        .btn-default:hover {
            background: #f7fafc;
            border-color: #cbd5e0;
        }
        .layui-input.disabled {
            background: #f7fafc;
            color: #a0aec0;
            cursor: not-allowed;
        }
        .layui-form-item::after {
            content: "";
            display: block;
            clear: both;
        }
        
        /* 响应式设计 */
        @@media (max-width: 768px) {
            body {
                padding: 10px;
            }
            .form-header, .form-body, .form-actions {
                padding: 20px;
            }
            .layui-input-block {
                margin-left: 0;
            }
            .layui-form-label {
                width: auto;
                text-align: left;
                float: none;
                line-height: normal;
                margin-bottom: 8px;
            }
            .auto-generate-wrapper {
                flex-direction: column;
                align-items: stretch;
            }
            .switch-btn {
                align-self: flex-start;
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="form-container">
        <div class="form-header">
            <h1 class="form-title">添加班组</h1>
        </div>
        <div class="form-body">
            <form class="layui-form" lay-filter="teamForm">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="required-mark">*</span>班组编号</label>
                    <div class="layui-input-block">
                        <div class="auto-generate-wrapper">
                            <input type="text" name="TeamNumber" required lay-verify="required" placeholder="请输入班组编号" autocomplete="off" class="layui-input" id="teamNumberInput">
                            <div class="switch-btn">
                                <input type="checkbox" name="autoGenerate" title="自动生成" lay-skin="switch" lay-filter="autoGenSwitch">
                                <span>自动生成</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="required-mark">*</span>班组名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="TeamName" required lay-verify="required" placeholder="请输入班组名称" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="required-mark">*</span>班组类型</label>
                    <div class="layui-input-block">
                        <select name="TeamType" lay-verify="required" lay-search="">
                            <option value="">请选择班组类型</option>
                            <option value="注塑">注塑</option>
                            <option value="组装">组装</option>
                            <option value="包装">包装</option>
                            <option value="质检">质检</option>
                            <option value="维修">维修</option>
                            <option value="物流">物流</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="Descr" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
            </form>
        </div>
        <div class="form-actions">
            <button class="layui-btn btn-primary" lay-submit lay-filter="teamSubmit">
                <i class="layui-icon layui-icon-ok"></i> 确定提交
            </button>
            <button type="button" class="layui-btn btn-default" onclick="history.back()">
                <i class="layui-icon layui-icon-return"></i> 取消返回
            </button>
        </div>
    </div>

    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function(){
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;

            // 雪花ID生成器
            var SnowflakeId = (function() {
                var machineId = Math.floor(Math.random() * 32); // 0-31
                var datacenterId = Math.floor(Math.random() * 32); // 0-31
                var sequence = 0;
                var lastTimestamp = -1;
                var twepoch = 1288834974657; // 2010-11-04 09:42:54

                function tilNextMillis(lastTimestamp) {
                    var timestamp = Date.now();
                    while (timestamp <= lastTimestamp) {
                        timestamp = Date.now();
                    }
                    return timestamp;
                }

                return {
                    nextId: function() {
                        var timestamp = Date.now();
                        
                        if (timestamp < lastTimestamp) {
                            throw new Error('Clock moved backwards');
                        }
                        
                        if (lastTimestamp === timestamp) {
                            sequence = (sequence + 1) & 4095; // 12位序列号
                            if (sequence === 0) {
                                timestamp = tilNextMillis(lastTimestamp);
                            }
                        } else {
                            sequence = 0;
                        }
                        
                        lastTimestamp = timestamp;
                        
                        // 64位ID组成: 1位符号位 + 41位时间戳 + 5位数据中心ID + 5位机器ID + 12位序列号
                        var id = ((timestamp - twepoch) << 22) |
                                (datacenterId << 17) |
                                (machineId << 12) |
                                sequence;
                        
                        return 'T' + Math.abs(id).toString();
                    }
                };
            })();

            // 自动生成编号开关
            form.on('switch(autoGenSwitch)', function(data){
                var $input = $('#teamNumberInput');
                
                if(data.elem.checked){
                    // 生成雪花ID
                    var snowflakeId = SnowflakeId.nextId();
                    $input.val(snowflakeId);
                    $input.prop('disabled', true);
                    $input.addClass('disabled');
                    
                    // 显示生成成功提示
                    layer.msg('已自动生成编号: ' + snowflakeId, {
                        icon: 1,
                        time: 2000
                    });
                } else {
                    $input.val('');
                    $input.prop('disabled', false);
                    $input.removeClass('disabled');
                }
            });

            // 表单提交
            form.on('submit(teamSubmit)', function(data){
                var loading = layer.load(2, {
                    content: '正在提交...',
                    time: 10*1000
                });
                
                // 手动获取表单数据
                var submitData = {
                    TeamNumber: $('input[name="TeamNumber"]').val(),
                    TeamName: $('input[name="TeamName"]').val(),
                    TeamType: $('select[name="TeamType"]').val(),
                    Descr: $('textarea[name="Descr"]').val()
                };
                
                // 数据验证
                if (!submitData.TeamNumber) {
                    layer.close(loading);
                    layer.msg('请输入班组编号', {icon: 2});
                    return false;
                }
                if (!submitData.TeamName) {
                    layer.close(loading);
                    layer.msg('请输入班组名称', {icon: 2});
                    return false;
                }
                if (!submitData.TeamType) {
                    layer.close(loading);
                    layer.msg('请选择班组类型', {icon: 2});
                    return false;
                }
                
                console.log('提交数据:', submitData);
                
                $.ajax({
                    url: '/ShiftSchedulingManagement/CreateTeam',
                    type: 'POST',
                    data: JSON.stringify(submitData),
                    contentType: 'application/json',
                    success: function(result){
                        layer.close(loading);
                        if(result.success){
                            layer.msg(result.message || '添加成功', {
                                icon: 1,
                                time: 2000
                            }, function(){
                                window.location.href = '/ShiftSchedulingManagement/ShowTeamManagementView';
                            });
                        } else {
                            layer.msg(result.message || '添加失败，请重试', {icon: 2});
                        }
                    },
                    error: function(xhr, status, error){
                        layer.close(loading);
                        
                        var errorMsg = '网络错误，添加失败';
                        try {
                            var response = JSON.parse(xhr.responseText);
                            if (response.message) {
                                errorMsg = response.message;
                            }
                        } catch (e) {
                            // 解析失败，使用默认错误信息
                        }
                        
                        layer.msg(errorMsg, {icon: 2});
                        console.error('提交失败:', error);
                        console.error('提交数据:', submitData);
                        console.error('响应:', xhr.responseText);
                    }
                });
                return false;
            });

            // 页面加载完成后的初始化
            $(document).ready(function(){
                // 确保自动生成开关默认为关闭状态
                $('input[name="autoGenerate"]').prop('checked', false);
                form.render('checkbox');
                
                // 添加输入框focus效果
                $('.layui-input, .layui-textarea').on('focus', function(){
                    $(this).parent().addClass('input-focus');
                }).on('blur', function(){
                    $(this).parent().removeClass('input-focus');
                });
            });
        });
    </script>
</body>
</html>
